<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for</title>
</head>

<body>
    <div id="app">
        <li style="list-style:none">
            <ul v-for="item in arra">
                归属地：{{item}}
            </ul>
        </li>
        <h4 v-for="item in objArr">
            菜品：{{item.name}}

        </h4>
        <input @click="remove" type="button" value="删除第一个菜品">
        <input @click="add" type="button" value="增加第一个菜品">

    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                data: 15,
                arra: ["湖南", "长沙", "郴州", "上海"],
                objArr: [{
                    name: "西红柿炒蛋"
                }, {
                    name: "蛋炒饭"
                }, {
                    name: "蔬菜"
                }, {
                    name: "鱼"
                }]
            },
            methods: {
                remove: function() {
                    this.objArr.splice(0, 1); /* shift();也可以 */
                },
                add: function() {
                    // this.objArr.splice(0,0,{name:'鸡肉'}); //添加到任意位置
                    this.objArr.push({
                        name: '鸡肉'
                    }) /* 添加到最后 */
                    console.log(this.objArr)
                }
            }
        })
    </script>
</body>

</html>